<template>
	<div>
		<div class="classlist" >
			<div class="list-wrap">
				<div class="movies">
					<div class="movies-list">
						<router-link :to="`/moviepage/${item.movieId}`" class="item" v-for="item in movieslist"
							:key="item.movieId">
							<div class="movie">
								<div class="avatar">
									<img :src="item.poster">
								</div>
								<div class="movie-info">
									<div class="title line-ellipsis" v-if="item.movieInfo.title!=''">
										{{item.movieInfo.title}}
									</div>
									<div class="english-title line-ellipsis" v-if="item.movieInfo.englishTitle!=''">
										{{item.movieInfo.englishTitle}}
									</div>
									<div class="actors line-ellipsis" v-if="item.movieInfo.actors!=''">
										{{item.movieInfo.actors}}
									</div>
									<div class="show-info line-ellipsis" v-if="item.movieInfo.showInfo!=''">
										{{item.movieInfo.showInfo}}
									</div>
								</div>
								<div class="movie-score">
									<div class="score line-ellipsis" v-if="item.score!=''">
										<span class="grade">{{item.score}}</span>
										<span>分</span>
									</div>
								</div>
							</div>
						</router-link>

					</div>
				</div>
			</div>
			<div class="more" @click="showMore()"  v-show="this.movieslist.length!=0">
				<div class="loader-wrap">
					<span>{{this.limit >=100? "已经到底了":"加载更多"}}</span>
				</div>
			</div>
		</div>

		<!-- loading -->
        <van-loading size="30px"  v-show="this.movieslist.length==0" color="#f03d37">加载中...</van-loading>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				movieslist: [],
				limit: 10,
			}
		},
		created() {
			this.getMovies()
		},
		mounted() {

		},
		methods: {
			async getMovies() {
				let re = await this.$axios.get("/index/moreClassicList?sortId=1&showType=3&limit=" + this.limit + "&offset=0")
				this.movieslist = re
				// console.log(this.movieslist)
			},

			showMore() {
				if (this.limit >= 100) {
					return
				}
				this.limit += 10;
				this.getMovies()
			},

		},
		computed: {

		}
	}
</script>

<style scoped lang="less">
/deep/ .van-loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  // transform: translateY(-50%);
}
.classlist {
	.list-wrap {
		background-color: #f5f5f5;
	}
}

.movies {
	padding-top: 14.5px;
	background-color: #fff;

	.item {
		display: block;
		color: #666;
	}
}

.movie {
	position: relative;
	margin: 0 0 20px 20px;
	display: flex;
	align-items: flex-start;

	.avatar {
		display: inline-block;

		img {
			width: 66px;
			height: 94px;
		}
	}

	.movie-info {
		margin-left: 10px;
		display: inline-block;
		color: #666;
		height: 100%;
		flex: 1;
		overflow: hidden;
		font-size: 13px;
		line-height: 18px;

		div {
			margin-bottom: 4px;
			color: #666;
			font-size: 13px;
		}

		.title {
			font-size: 17px;
			line-height: 24px;
			color: #333;
			font-weight: 700;
		}
	}

	.movie-score {
		width: 60px;
		height: 17px;
		font-size: 12px;
		color: #999;
		line-height: 17px;
		display: inline-block;
		text-align: center;

		span {
			font-size: 12px;
		}

		.grade {
			color: #faaf00;
			font-size: 15px;
		}

	}
}

.line-ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.more {
	line-height: 40px;
	height: 40px;
	text-align: center;
}

.loader-wrap {
	text-align: center;
	line-height: 40px;
}
</style>
